<template>
  <div class="login-wrap">
<!--    &lt;!&ndash; 城市分布 &ndash;&gt;-->
<!--    <div class="chart-row">-->
<!--      <div class="chart-card" ref="chartsDom2"></div>-->
<!--      <div class="chart-card" ref="chartsDom3"></div>-->
<!--    </div>-->
    <!-- 区县分布 -->
    <div class="chart-row">
      <div class="chart-card" ref="chartsDom4"></div>
      <div class="chart-card" ref="chartsDom5"></div>
    </div>
    <!-- 街道分布 -->
    <div class="chart-row">
      <div class="chart-card" ref="chartsDom6"></div>
      <div class="chart-card" ref="chartsDom7"></div>
    </div>
  </div>
</template>

<script>
import * as api from '../../api/interface'
import * as echarts from 'echarts';

export default {
  data() {
    return {
      cityList: ["哈尔滨市", "长春市", "沈阳市", "北京市", "济南市"],
      cityDataList: [100, 120, 140, 88, 91],
      cityPie: [{value: 300,name: '哈尔滨市'},{value: 500,name: '长春市'},
        {value: 200,name: '沈阳市'},{value: 800,name: '济南市'}],
      districtList: ["道里区", "长春区", "辽阳区", "朝阳区", "市辖区"],
      districtDataList: [100, 120, 140, 88, 91],
      districtPie: [{value: 300,name: '道里区'},{value: 500,name: '长春区'},
        {value: 200,name: '辽阳区'},{value: 800,name: '朝阳区'}],
      streetList: ["道里区", "长春区", "辽阳区", "朝阳区", "市辖区"],
      streetDataList: [100, 120, 140, 88, 91],
      streetPie: [{value: 300,name: '兆麟街道'},{value: 500,name: '大直街道'},
        {value: 200,name: '中央大街'},{value: 800,name: '征仪街道'}],
    }
  },
  mounted() {
    api.statistic({}).then(res => {
      if (res.message != "success") {
        this.$message.error(data.message)
      } else {
        // 数据赋值
        // this.cityList = res.returnObj.cityList;
        // this.cityDataList = res.returnObj.cityDataList;
        // this.cityPie = res.returnObj.cityPie;
        this.districtList = res.returnObj.districtList;
        this.districtDataList = res.returnObj.districtDataList;
        this.districtPie = res.returnObj.districtPie;
        this.streetList = res.returnObj.streetList;
        this.streetDataList = res.returnObj.streetDataList;
        this.streetPie = res.returnObj.streetPie;

        // 通用配置
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];

        // 饼图通用配置
        const pieOption = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
              color: '#333'
            }
          },
          color: colors
        };

        // 柱状图通用配置
        const barOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color: colors
        };

        // // 城市分布饼图
        // let myChart2 = echarts.init(this.$refs.chartsDom2)
        // myChart2.setOption({
        //   ...pieOption,
        //   backgroundColor: '#fff',
        //   title: {
        //     text: '城市店铺分布',
        //     left: 'center',
        //     textStyle: {
        //       color: '#333',
        //       fontSize: 16,
        //       fontWeight: 'normal'
        //     }
        //   },
        //   series: [{
        //     name: '店铺数量',
        //     type: 'pie',
        //     radius: ['40%', '70%'],
        //     avoidLabelOverlap: false,
        //     label: {
        //       show: true,
        //       formatter: '{b}: {c} ({d}%)'
        //     },
        //     emphasis: {
        //       itemStyle: {
        //         shadowBlur: 10,
        //         shadowOffsetX: 0,
        //         shadowColor: 'rgba(0, 0, 0, 0.5)'
        //       }
        //     },
        //     data: this.cityPie
        //   }]
        // });
        //
        // // 城市分布柱状图
        // let myChart3 = echarts.init(this.$refs.chartsDom3)
        // myChart3.setOption({
        //   ...barOption,
        //   backgroundColor: '#fff',
        //   title: {
        //     text: '城市店铺分布TOP5',
        //     left: 'center',
        //     textStyle: {
        //       color: '#333',
        //       fontSize: 16,
        //       fontWeight: 'normal'
        //     }
        //   },
        //   xAxis: {
        //     type: 'category',
        //     data: this.cityList,
        //     axisLabel: {
        //       rotate: 45,
        //       color: '#666'
        //     },
        //     axisLine: {
        //       lineStyle: {
        //         color: '#ddd'
        //       }
        //     }
        //   },
        //   yAxis: {
        //     type: 'value',
        //     axisLine: {
        //       lineStyle: {
        //         color: '#ddd'
        //       }
        //     },
        //     splitLine: {
        //       lineStyle: {
        //         color: '#eee'
        //       }
        //     }
        //   },
        //   series: [{
        //     name: '店铺数量',
        //     type: 'bar',
        //     barWidth: '60%',
        //     data: this.cityDataList
        //   }]
        // });

        // 区县分布饼图
        let myChart4 = echarts.init(this.$refs.chartsDom4)
        myChart4.setOption({
          ...pieOption,
          backgroundColor: '#fff',
          title: {
            text: '区县店铺分布',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          series: [{
            name: '店铺数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.districtPie
          }]
        });

        // 区县分布柱状图
        let myChart5 = echarts.init(this.$refs.chartsDom5)
        myChart5.setOption({
          ...barOption,
          backgroundColor: '#fff',
          title: {
            text: '区县店铺分布TOP5',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          xAxis: {
            type: 'category',
            data: this.districtList,
            axisLabel: {
              rotate: 45,
              color: '#666'
            },
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          },
          series: [{
            name: '店铺数量',
            type: 'bar',
            barWidth: '60%',
            data: this.districtDataList
          }]
        });

        // 区县分布饼图
        let myChart6 = echarts.init(this.$refs.chartsDom6)
        myChart6.setOption({
          ...pieOption,
          backgroundColor: '#fff',
          title: {
            text: '街道店铺分布',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          series: [{
            name: '店铺数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.streetPie
          }]
        });

        // 区县分布柱状图
        let myChart7 = echarts.init(this.$refs.chartsDom7)
        myChart7.setOption({
          ...barOption,
          backgroundColor: '#fff',
          title: {
            text: '街道店铺分布TOP5',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          xAxis: {
            type: 'category',
            data: this.streetList,
            axisLabel: {
              rotate: 45,
              color: '#666'
            },
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          },
          series: [{
            name: '店铺数量',
            type: 'bar',
            barWidth: '60%',
            data: this.streetDataList
          }]
        });

        // 监听窗口大小变化，图表自适应
        window.addEventListener('resize', () => {
          myChart2.resize();
          myChart3.resize();
          myChart4.resize();
          myChart5.resize();
          myChart6.resize();
          myChart7.resize();
        });
      }
    })
  },
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.chart-card {
  flex: 1;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  0 1px 6px -1px rgba(0, 0, 0, 0.02),
  0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .chart-row {
    flex-direction: column;
  }

  .chart-card {
    width: 100%;
  }
}
</style>
